
<template>
  <div class="risk-content">
    <div class="risk-card">
      <div class="task-card">
        <div class="task-card-hd">
          <eagle-circle
            v-model="currentRate"
            color="#fff"
            layer-color="rgba(255,255,255,0.5)"
            :rate="data.CurrentProgress"
            :stroke-width="70"
            :speed="100"
            size="75px"
          >
            <div slot="default" class="task-text">
              <div class="mb-5">{{ data.CurrentProgress }}%</div>
              <div style="font-size: 10px">学习进度</div>
            </div>
          </eagle-circle>
          <div class="task-card-hd-r mt-5 ml-10">
            <div class="mb-10">{{ data.PlanName }}</div>
            <div class="Introduce">
              {{ data.Introduce || "暂无简介" }}
            </div>
          </div>
        </div>
        <div class="task-card-bd">
          任务状态：<span v-if="data.Status === -1">已过期</span>
          <span v-if="data.Status === 10">进行中</span>

          <span v-if="data.Status === 20">已完成</span>
        </div>
        <div class="task-card-bt mt-20">
          <div>发起人：{{ data.PublishChnName }}</div>
          <span>
            {{ data.PublishDate }}至{{ data.PlanFinishTime }}
            </span>
        </div>
      </div>
      <div class="curriculum-title mt-10">课件列表</div>
      <div class="curriculum-list mt-10">
        <div
          class="curriculum-list-cell"
          v-for="(item, index) in data.Details"
          :key="index"
          @click="_goTrainWareDetail(item)"
        >
          <div class="curriculum-list-l">
            <eagle-circle
              v-model="item.rate"
              color="green"
              layer-color="#e8f1f8"
              :rate="item.CurrentProgress"
              :stroke-width="80"
              :speed="100"
              size="50px"
            >
              <div slot="default" class="task-text">
                <img
                  class="imgs"
                  src="@/assets/Images/AppIcon/icon_home_studyplan.png"
                  alt=""
                />
              </div>
            </eagle-circle>
            <div class="ml-10">
              <div class="curriculum-list-title mb-10">{{ item.Name }}</div>
              <div class="curriculum-list-cont">
                学习进度：{{ item.CurrentProgress }}%<span>|</span>学时:{{
                  item.CurrentStudyHours | keepTwoDecimalFull
                }}/{{ item.StandardStudyHours | keepTwoDecimalFull }} 分钟
              </div>
            </div>
          </div>
          <van-icon name="arrow" />
        </div>
      </div>
      <div v-if="data.ExamID > 0">
        <div class="curriculum-title mt-10">已分配考试</div>
        <div class="curriculum-list mt-10">
          <div class="curriculum-list-cell">
            <div class="curriculum-list-l">
              <img
                class="imgs"
                src="@/assets/Images/AppIcon/icon_exam_icon_2.png"
                alt=""
              />
              <div class="ml-10">
                <div class="curriculum-list-title mb-10">
                  {{ data.ExamName  }}
                </div>
                <div class="curriculum-list-cont">暂无描述</div>
                <template v-if="data.HaveExamedTimes > 0">
                  <div class="curriculum-list-cont mt-10">
                    已考次数：{{ data.HaveExamedTimes }}
                  </div>
                  <div class="curriculum-list-cont mt-10">
                    最新成绩：{{ data.Score | keepTwoDecimalFull }}
                    {{ data.IsExamPass ? "(通过)" : "(未通过)" }}
                  </div>
                </template>
              </div>
            </div>
            <span
              v-if="data.AllowExam"
              style="font-size: 12px; color: rgb(5, 125, 229)"
              @click="_goExExamExplain()"
              >进入考试</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getDate } from "@/utils/getDate.js";
import { keepTwoDecimalFull } from "@/utils/common.js";
import store from "@/store/index";
export default {
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      currentRate: 0,
      rate: 0,
      id: this.$route.query.id,
      loading: false,
      data: {},
    };
  },
  created() {

    let examResultID = localStorage.getItem('examResultID');
    if (examResultID) {
      this.$router.push("/Train/ExamResult?id=" + examResultID);
      localStorage.removeItem("examResultID")
      return;
    }
  
    this.getDetail();
  },
  filters: {
    keepTwoDecimalFull: function (value) {
      return keepTwoDecimalFull(value);
    },
  },
  methods: {
    getDetail() {
      this.loading = true;
      var me = this;
      let params = {  id: this.id };

      this.$axios
        .get(this.$constUrl.TrainEntrustedPlan_GetDetail, { params: params })
        .then((res) => {
            this.loading = false;
            res.data.PlanFinishTime = getDate(res.data.PlanFinishTime);
            res.data.PublishDate = getDate(res.data.PublishDate);
            me.data = res.data;
        });

    },
    _goTrainWareDetail(item) {
      var url = "/Train/WareDetail?id=" + item.RelationID + "&sid="+ item.RelationSID + "&stype="+ item.RelationSType;
      this.$router.push(url);
    },
    // 考试说明
    _goExExamExplain() {
      this.$router.push("/Train/ExExamExplain?id=" + this.data.ExamID);
    },
  },
};
</script>

<style lang="less" scoped>
.risk-content {
  background-color: #e8f1f8;
  min-height: 100vh;
  .risk-card {
    padding: 10px;
    background-color: #fff;
  }
  .task-card {
    width: 100%;
    height: 146px;
    padding: 10px;
    background: url("../../../assets/Images/AppIcon/image_studyplan_top_bg.png")
      no-repeat;
    background-size: 100% auto;
    color: #fff;
    border-radius: 8px;
    box-shadow: 3px 3px 3px #ccc;
  }
}
.task-card-hd {
  display: flex;
}
.task-text {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.task-card-bd {
  display: inline-block;
  padding: 0 10px;
  height: 20px;
  background-color: #fff;
  color: rgb(5, 125, 229);
  font-size: 10px;
  line-height: 20px;
  border-radius: 10px;
  margin-left: 70px;
}
.task-card-hd-r {
  width: 300px;
  font-size: 14px;
  font-weight: 700;
  .Introduce {
    line-height: 1.2;
    font-size: 12px;
    font-weight: 400;
    text-overflow: ellipsis;
    display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
    -webkit-line-clamp: 2; /** 显示的行数 **/
    overflow: hidden; /** 隐藏超出的内容 **/
    word-break: break-all;
  }
}
.task-card-bt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
}
.curriculum-title {
  height: 24px;
  line-height: 24px;
  font-size: 14px;
  border-bottom: 1px solid #eee;
}
.curriculum-list-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  padding: 10px 0;
  .curriculum-list-l {
    display: flex;
    align-items: center;
  }
}
.curriculum-list-cell:last-child {
  border-bottom: 1px solid #fff;
}
.imgs {
  width: 50px;
  height: 50px;
}
.curriculum-list-title {
  font-size: 15px;
}
.curriculum-list-cont {
  font-size: 12px;
  color: #666;
  > span {
    margin: 0 10px;
  }
}
</style>